<template>
  <div class="chat">
    <van-nav-bar :title="`消息(${chatList.length})`">
      <span slot="right" class="icon-add iconfont"
      @click="$router.push({
        name: 'user-search'
      })"
      ></span>
    </van-nav-bar>
    <div>
      <div class="item" v-for="item in chatList" :key="item.id" @click="goItem(item)">
        <img class="item-avatar" :src="item.avatar" :alt="item.nickName" />
        <div class="item-main">
          <div class="item-row">
            <div class="item-name">{{ item.nickname }}</div>
            <div class="gray">{{ item.create_time | shortDatetime }}</div>
          </div>
          <div class="item-msg" v-if="item.is_group">
            <span class="gray">{{ item.user_nickname }}：</span>
            <span class="gray">{{ item.content }}</span>
          </div>
          <div class="item-msg" v-else>
             <div class="gray">{{ item.content }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ChatList',
  data() {
    return {}
  },
  computed: {
    chatList() {
      return this.$store.state.ch.chatList
    },
    userInfo() {
      return this.$store.state.user.userInfo
    }
  },
  methods: {
    goItem(item) {
      this.$router.push({
        name: 'chat-item',
        params: {
          partnerId: item.partner_id
        },
        query: item
      })
    }
  }
}
</script>

<style lang="less" scoped>
.chat {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: #fff;
}
.view {
  background-color: #eee;
}

.item {
  display: flex;
  overflow: hidden;
  font-size: 12px;
  padding: 8px 10px;
  background-color: #fff;
}

.item-main {
  position: relative;
  flex: 1;
  &::after {
    position: absolute;
    bottom: -8px;
    content: " ";
    display: block;
    height: 1px;
    width: 100%;
    background: #eee;
    transform: scaleY(.5);
  }
}

.item-avatar {
  float: left;
  width: 36px;
  height: 36px;
  margin-right: 10px;
  border-radius: 4px;
}

.item-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.item-msg {
  display: flex;
  align-items: center;
  color: #666;
}

.gray {
  color: #b7b6b6;
  font-size: 12px;
}

.item-name {
  font-size: 14px;
  margin-bottom: 2px;
}
</style>
